<template>
  <div class="friend-container">
    <!-- 顶部统计 -->
    <div class="stats-header">
      <div class="stats-item">
        <div class="label">{{ t('home.inviteStats.friends') }}</div>
        <div class="value">{{mentees.mentee_count}}</div>
      </div>
      <div class="stats-item">
        <div class="label">{{ t('home.inviteStats.income') }}</div>
        <div class="value">0</div>
      </div>
    </div>

    <!-- 好友列表 -->
    <div class="friend-list">
      <!-- 好友项 -->
      <div class="friend-item" v-for="friend in mentees.mentees" :key="friend.id">
        <div class="friend-info">
          
          <img :src="friend.mentee_user_info?.user_avatar || avatar" class="avatar">
          <div class="name">{{ friend.mentee_user_info?.user_name }}</div>
          <div class="date">{{ dayjs(friend.mentee_user_info?.create_time).format('DD/MM/YYYY') }}</div>
        </div>

        <!-- 礼包列表 -->
        <div class="gift-list">
          <div v-for="(gift, index) in friend.mentee_tasks" :key="gift.id"
               :class="['gift-item', gift.task_status == '1' ? 'sent' : gift.task_status == '0' ? 'pending' : 'expired']">
            <div class="gift-info">
              <div class="gift-title" :class="locale == 'zh' ? 'flex  items-center' : ''">
                <p>{{ t('home.giftPackage', { index: index + 1 }) }}: </p>
                <p class=" gift-type mt-[5px]" :class="locale == 'zh' ? 'ml-[5px] !mt-[0px]' : ''">{{ t(`home.giftStatus.${gift.task_status}`) }}</p>
              </div>
              <div class="gift-desc">{{ t(`home.rewardSteps.step${gift.task_type}`) }}</div>
            </div>
            <div class="gift-coins">+{{gift.task_value}} {{ t('home.coins') }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部提示 -->
    <div class="bottom-tip">{{ t('home.loadAll') }}</div>
  </div>
</template>

<script setup lang="ts">
import {useAutoRequest} from "@/hooks/loading"
// import avatar from "@/assets/image/yoomatch/avatar.png"
import avatar from "@/assets/image/avatar.png"
import {showToast} from "vant"
import api from "@/api/api"
import dayjs from "dayjs"
import { useI18n } from 'vue-i18n'

const { t  , locale } = useI18n()

const [loadingMentees, inviteMentees] = useAutoRequest(api.inviteMentees)
const mentees = ref({
  mentee_count: 0,
  mentees: []
})
const getData = async ()=> {
  const res = await inviteMentees({
    page: 1,
    page_size: 99
  })
  console.log(res);
  mentees.value = {...res}
}
getData()


</script>

<style scoped lang="scss">
.friend-container {
    background: #F6F6F6;
    min-height: 100vh;
}

.stats-header {
  display: flex;
  background: linear-gradient( 180deg, #FF7A5C 0%, #FFB967 100%);
  color: white;
  padding: 24px 20px;
  border-radius: 0;
}

.stats-item {
  flex: 1;
  text-align: center;
}

.stats-item .label {
  font-size: 14px;
  margin-bottom: 8px;
}

.stats-item .value {
  font-size: 24px;
  font-weight: bold;
}
.friend-list {
    padding: 15px 10px;
    
}
.friend-item {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.friend-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.name {
  flex: 1;
  font-weight: bold;
}

.date {
  color: #999;
  font-size: 14px;
  margin-top: 4px;
}

.gift-item {
  display: flex;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
  position: relative;
}

.gift-item.sent {
  background: #EEFFE8
  
}

.gift-item.sent .gift-coins {
  background: #28C838;
  color: white;
}
.gift-item.sent .gift-type {
  color: #28C838;
}
.gift-item.pending .gift-type {
  color: #EA382D;
}

.gift-item.pending {
  background: #FFE8E8
}

.gift-item.pending .gift-coins {
  background: #EA382D;
  color: white;
}

.gift-item.expired {
  background: #EBEBEB
}

.gift-item.expired .gift-coins {
  background: #999;
  color: white;
}

.gift-info {
  flex: 1;
}

.gift-title {
  font-size: 16px;
  margin-bottom: 12px;
}

.gift-desc {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.gift-coins {
  position: absolute;
  right: 16px;
  top: 20px;
  padding: 3px 9px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: normal;
}

.bottom-tip {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 16px 0;
}
</style>